<template>
  <!-- PM带班生产记录列表 -->
  <base-breadcrumb>
    <searchData
      :search-data="searchOptions"
      @search="handleSearch"
    />
    <div class="page-body">
      <a-card :bordered="false">
        <!-- <title-name title="项目经理带班生产记录" /> -->
        <div class="table-operateors mb20">
          <a-button
            v-btnPermission="'hse_027_add_01'"
            icon="plus"
            type="primary"
            @click="handleUpdate('add')"
            v-if="hideBuquBtn()"
          >
            新增
          </a-button>
        </div>
        <list-table
          ref="table"
          size="default"
          row-key="id"
          :columns="columns"
          :request="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          show-pagination="auto"
        >
          <template slot="operator" slot-scope="text, record">
            <div class="pub-table-list-action">
              <span v-btnPermission="'hse_027_loo_04'" @click="handleUpdate('look', record)">查看</span>
              <span @click="del(record)" v-if="hideBuquBtn()">删除</span>
            </div>
          </template>

          <template slot="imageProcessTypeVO" slot-scope="record">
            <span> {{ record ? record.name : '-' }}</span>
          </template>
        </list-table>
      </a-card>
    </div>
  </base-breadcrumb>
</template>

<script>
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
import { delPm, getPMRecordList } from '@/api/safetySupervision/safetySystem.js'

const searchOptions = [
  // {
  //   name: '所属分公司',
  //   valueKey: 'branchComId',
  //   type: SelectSubCompany
  // },
  {
          name: '所属单位',
          valueKey: 'searchQuery',
          type: OrgTreeSelect,
        },
  // {
  //   name: '所属项目',
  //   keyValue: 'branchComId',
  //   valueKey: 'projectId',
  //   type: SelectProject
  // },
  {
    name: '带班领导',
    value: 'creatorName',
    type: 'input'
  },
  {
    name: '带班日期',
    value: 'leadTime',
    type: 'dateRange'
  }
]

const columns = [
  {
    title: '所属分公司',
    dataIndex: 'branchComName',
    width:250,
  },
  {
    title: '所属项目',
    dataIndex: 'projectName',
    width:250, 
  },
  {
    title: '项目经理',
    dataIndex: 'projectManager',
     width:100,
  },
  {
    title: '形象进度',
    dataIndex: 'imageProcessTypeVO',
    width:100,
    scopedSlots: { customRender: 'imageProcessTypeVO' }
  },
  {
    title: '带班日期',
    dataIndex: 'takeShiftTime',
    width:100,
  },
  //   {
  //     title: '填报人',
  //     dataIndex: 'createName',
  //   },
  {
    title: '填报时间',
    dataIndex: 'createTime',
    width:100, 
  },
  {
    title: ' 操作',
    dataIndex: 'operator',
    width:150, 
    scopedSlots: { customRender: 'operator' }
  }
]
export default {
  name: 'a' + Date.now(),
  data() {
    return {
      searchOptions: searchOptions,
      formConfig: {},
      state: {
        isExpand: false
      },
      formInfo: this.$form.createForm(this, { name: 'searchForm' }),
      columns: columns,
      queryParam: {},
      loadData: async (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        const [err, res] = await getPMRecordList(requestParameters)
        return new Promise((resolve, reject) => {
          if (err) {
            reject(err)
          } else {
            resolve(res)
          }
        })
      }
    }
  },
  methods: {
    del(row) {
      this.$delList3(delPm, this.$refs.table.refresh, { id: row.id })
    },
    handleSearch(val = {}) {
      this.queryParam = {
        ...val,
        beginTime: (val.leadTime && val.leadTime.length && val.leadTime[0].format('YYYY-MM-DD')) || void 0,
        endTime: (val.leadTime && val.leadTime.length && val.leadTime[1].format('YYYY-MM-DD')) || void 0
      }
      this.$refs.table.refresh(true)
    },
    // 处理更新操作（新增、编辑）
    handleUpdate(type, data = {}) {
      this.$router.push({
        name: 'UpdatePmProductionRecord',
        query: {
          id: data.id || '',
          pageType: type
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-header {
  .header-row {
    display: flex;

    .flex-content {
      flex: auto;
    }

    .divider {
      margin: 0 12px;
    }

    .expand-btn {
      margin-left: 8px;
      font-size: 14px;
    }
  }
}

.page-body {
  .table-operateors {
    .ant-btn + .ant-btn {
      margin-left: 12px;
    }
  }
}
</style>